<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
      vue中的事件绑定 
      语法：
        标准：v-on:事件名="事件方法" 事件方法可以写小括号，也可以不写小括号
        简写：@事件名="事件方法" 事件方法可以写小括号，也可以不写小括号
      在元素中绑定好事件后，一定要在vue配置中添加一个methods配置，在其配置中实现对应的事件方法。

      事件方法不写小括号，则vue会在绑定的方法中自动注入一个event事件对象，从而方便开发者使用
      事件方法有小括号，方便向方法中传数据，但是它不会自动的注入event事件对象了，在你需要event事件对时，需要手动注入事件对象给方法  $event变量，它就是事件对象,一般我们它$event事件传给实现方法，多数写在第1个参数中
    -->

    <button v-on:click="clickVueBtn">我是vue中的按钮</button>
    <hr>
    <h3>{{ title }}</h3>
    <input type="text" @input="inputFn">
    <hr>
    <button v-on:click="clickBtnId($event,id,'张三')">点击有1000</button>

  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        id: 1000,
        title: '我是标题'
      },
      // methods定义的方法一定要用function方案不能使用箭头函数定义，如果使用箭头函数定义，则this将跑偏
      // 注：定义的方法里面建议用箭头函数，原因在于保持this的指向
      methods: {
        clickVueBtn(evt) {
          console.log(evt)
        },
        inputFn(evt) {
          this.title = evt.target.value
        },
        clickBtnId(evt, id, name) {
          console.log(id, name, evt)
        }
      }
    })
  </script>
</body>

</html>